<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <div style="height: 50px;line-height: 50px;background:#ccc">
            <router-link to="/">熊大</router-link>
            <router-link to="/no2">熊二</router-link>
        </div>
        <div style="min-height: 500px;">
            {{$route}}
            <router-view></router-view>
        </div>
        <div style="height: 150px;line-height: 150px;background:#ccc"></div>
    </div>
    <template id="no1">
        <div>
            {{$route.path}}
            熊大
        </div>
    </template>
    <template id="no2">
        <div>
            {{$route.path}}
            熊二
        </div>
    </template>
</body>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    // 声明组件模板
    var no1={template:'#no1'}
    var no2={template:'#no2'}
    // 配置routes
    var routes=[
        {path:'/',name:'no1',component:no1},
        {path:'/no2',name:'no2',component:no2},
    ]
    // 配置router实例
    var router = new VueRouter({
        routes
    })
    new Vue({
        el:'#box',
        router
    })
</script>
</html>